
<div class="d-flex flex-column h-100 w-100">

  <ng-container *ngIf="(itemDetails && (itemDetails | keyvalue).length) && canInvoke();else noInvocation">

    <!-- Query parameters -->
    <ng-container
      *ngIf="(parameters && parameters.length) && (itemDetails.verb === 'get' || itemDetails.verb === 'delete')">

      <div class="row mb-3">

        <div class="col-12 mb-3">
          <h3 class="my-0 fw-bold">Query parameters</h3>
        </div>

        <div class="col-12 params-wrapper">

          <form [formGroup]="paramsForm" novalidate>

            <div
              class="row align-items-center params-inputs"
              *ngFor="let item of getArguments(itemDetails.input, true)">

              <div class="col-sm-6 col-12">
                <app-query-params
                  [item]="item"
                  [allItems]="itemDetails.input">
                </app-query-params>
              </div>

              <div class="col-sm-6 col-12">
                <p class="my-0 ms-3">
                  {{getDescription(item)}}
                </p>
              </div>

            </div>

            <div
              class="row align-items-center params-inputs"
              *ngFor="let item of getArguments(itemDetails.input, false)">

              <div class="col-sm-6 col-12">
                <app-query-params [item]="item" [allItems]="itemDetails.input"></app-query-params>
              </div>

              <div class="col-sm-6 col-12">
                <p class="my-0 ms-3">
                  {{getDescription(item)}}
                </p>
              </div>

            </div>
          </form>

        </div>

      </div>

    </ng-container>

    <!-- If has body -->
    <ng-container *ngIf="itemDetails?.consumes">

      <div class="d-flex flex-column w-100 h-100 endpoint-result mb-3">

        <div class="d-flex justify-content-between align-items-center w-100 mb-3">
          <h3 class="my-0 fw-bold">Body</h3>
        </div>

        <!-- Payload for application/json -->
        <ng-container *ngIf="itemDetails?.consumes === 'application/json'">

          <ngx-codemirror
            class="h-100"
            [(ngModel)]="payload"
            [options]="cmOptions.json">
          </ngx-codemirror>

        </ng-container>

        <!-- Payload for application/x-hyperlambda -->
        <ng-container *ngIf="itemDetails?.consumes === 'application/x-hyperlambda'">

          <ngx-codemirror
            class="h-100"
            [(ngModel)]="payload"
            [options]="cmOptionsHyperlambda.json">
          </ngx-codemirror>

        </ng-container>

        <!-- Payload for text -->
        <ng-container *ngIf="itemDetails?.consumes?.startsWith('text/')">

          <ngx-codemirror
            class="h-100"
            [(ngModel)]="payload"
            [options]="cmOptionsMarkdown.json">
          </ngx-codemirror>
        </ng-container>

      </div>
    </ng-container>

    <div class="d-flex flex-column w-100 h-100 endpoint-result" *ngIf="result">
      <div class="d-flex justify-content-between align-items-center w-100 mb-3">
        <h3 class="my-0 fw-bold">Result</h3>

        <button
          mat-button
          color="primary"
          class="copy-btn"
          (click)="copyResult(result.response)">
          <mat-icon>content_copy</mat-icon>
          Copy result
        </button>

      </div>
      <p [class.text-danger]="!isSuccess()">
        <span [class.text-success]="isSuccess()">{{result.status}}</span>&nbsp;
        <span>{{result.statusText}}</span>
      </p>

      <ng-container *ngIf="result.responseType === 'json'">

        <ngx-codemirror
          class="h-100"
          [(ngModel)]="result.response"
          [options]="cmOptionsReadonly.json">
        </ngx-codemirror>

      </ng-container>

      <ng-container *ngIf="result.responseType === 'hyperlambda'">

        <ngx-codemirror
          class="h-100"
          [(ngModel)]="result.response"
          [options]="cmHlOptionsReadonly.hl">
        </ngx-codemirror>

      </ng-container>

      <ng-container *ngIf="result.responseType === 'text'">

        <ngx-codemirror
          class="h-100"
          [(ngModel)]="result.response"
          [options]="markdownOptionsReadonly.md">
        </ngx-codemirror>

      </ng-container>

      <ng-container *ngIf="result.responseType === 'blob'">

        <img
          [src]="result.blob"
          alt="Image resulting from invocation"
          width="250"
          class="d-block m-auto">

      </ng-container>

    </div>

    <ng-container *ngIf="!(parameters.length) && !result && !itemDetails?.consumes">
      <div class="m-auto">
        <h3>Invoke the endpoint to see the result.</h3>
      </div>
    </ng-container>

    <div class="d-flex justify-content-end button-row mt-3">

      <button
        mat-flat-button
        color="primary"
        class="px-sm-4"
        [disabled]="isExecuting"
        (click)="invoke()">
        Try it out!
      </button>

    </div>
  </ng-container>

  <ng-template #noInvocation>

    <ng-container *ngIf="(itemDetails && (itemDetails | keyvalue).length && !canInvoke());else noEndpointSelected">
      <div class="m-auto">
        <h3 class="fw-bold">This endpoint cannot be executed here.</h3>
      </div>
    </ng-container>

    <ng-template #noEndpointSelected>
      <div class="m-auto">
        <h3>Select an endpoint</h3>
      </div>
    </ng-template>

  </ng-template>

</div>
